import React from 'react'
import classNames from 'classnames'

export enum ButtonSize {
    Large = 'lg',
    Small = 'sm'
}

export enum ButtonType {
    Primary = 'primary',
    Default = 'default',
    Danger = 'danger',
    Link = 'link'
}

interface BaseButtonProps {
    className?: string
    disabled?: boolean
    size?: ButtonSize
    btnType?: ButtonType
    children: React.ReactNode
    href?: string
}

type NativeButtonProps = BaseButtonProps & Partial<React.ButtonHTMLAttributes<HTMLElement>>
type AnchorButtonProps = BaseButtonProps & Partial<React.AnchorHTMLAttributes<HTMLElement>>
type ButtonProps = NativeButtonProps & AnchorButtonProps

const Button: React.FC<ButtonProps> = (props) => {
    const { className, btnType, size, disabled, children, href, ...restProps } = props

    const classes = classNames('btn', {
        [`btn-${btnType}`]: btnType,
        [`btn-${size}`]: size,
        'disabled': (btnType === ButtonType.Link) && disabled,
    }, className)

    if (btnType === ButtonType.Link && href) {
        return <a className={classes} href={href} {...restProps}>{children}</a>
    } else {
        return <button className={classes} disabled={disabled} {...restProps}>{children}</button>
    }
}

Button.defaultProps = {
    disabled: false,
    btnType: ButtonType.Default
}

export default Button
